<template>
	<div class="main">
		<div class="main-warpper">
			<header class="main-header clear">
				<img class="main-title pull-left" src="./img/header-title.png"/>
				<div class="main-info pull-right" @click="goSystem">系统管理</div>
			</header>
			<div class="main-tabs">
				<Tabs @on-click="tabsClick">
			        <TabPane label="接口更新日志" name="update-journal"></TabPane>
			        <TabPane label="strust接口清单" name="strust-detailed"></TabPane>
			        <TabPane label="handler接口清单" name="handler-detailed"></TabPane>
			        <TabPane label="strust日志" name="strust-journal"></TabPane>
			        <TabPane label="handler日志" name="handler-journal"></TabPane>
			        <TabPane label="任务运行日志" name="function-journal"></TabPane>
			        <TabPane label="系统文档" name="system-document"></TabPane>
			    </Tabs>
			</div>
			<div class="main-content">
				<component class="main-component" :is="view"></component>
			</div>
		</div>
	</div>
</template>

<script>
	import updateJournal from './child/update-journal.vue';
	import strustDetailed from './child/strust-detailed.vue';
	import handlerDetailed from './child/handler-detailed.vue';
	import strustJournal from './child/strust-journal.vue';
	import handlerJournal from './child/handler-journal.vue';
	import functionJournal from './child/function-journal.vue';
	import systemDocument from './child/system-document.vue';
	
	export default {
		components: {
			'update-journal': updateJournal,
			'strust-detailed': strustDetailed,
			'handler-detailed': handlerDetailed,
			'strust-journal': strustJournal,
			'handler-journal': handlerJournal,
			'function-journal': functionJournal,
			'system-document': systemDocument
		},
		data() {
			return {
				view: 'update-journal'
			}
		},
		methods: {
			tabsClick(name) {
				this.view = name;
			},
			goSystem() {
				this.$router.push('/login');
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		height: 100%;
		.main-warpper {
			width: 100%;
			height: 100%;
			.main-header {
				height: 40px;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background-image: url(./img/header-bg.png);
				background-size: cover;
				user-select: none;
				.main-title {
					margin-top: 4px;
				}
				.main-info {
					height: 100%;
					line-height: 40px;
					margin-right: 8px;
					cursor: pointer;
					color: white;
					font-size: 14px;
				}
			}
			.main-tabs {
				position: fixed;
				top: 40px;
				left: 0;
				right: 0;
				user-select: none;
			}
			.main-content {
				position: fixed;
				top: 80px;
				bottom: 0;
				left: 0;
				right: 0;
				.main-component {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}
		}
	}
</style>